<template>
    <div>
        <a-card style="width: 100%; padding: 10px;">
            <a-card-meta :title="userInfo.nickname">
                <template #avatar>
                    <a-avatar :src="userInfo.avatarUrl" :size="100" />
                </template>
                <template #description>
                    <span>{{ userInfo.remark || '这个人很懒，什么都没留下' }}</span>
                    <div style="margin-top: 10px;">
                        <a-space>
                            <a-tag>
                                <!-- 性别图标 -->
                                <span class="tag-content">
                                    <svg v-if="userInfo.sex === 1" viewBox="0 0 1024 1024" width="14" height="14">
                                        <path
                                            d="M544 800v-77.44a256 256 0 1 0-64 0V800H384v64h96v96h64v-96h96v-64h-96zM512 592a192 192 0 1 1 192-192 192 192 0 0 1-192 192z"
                                            fill="#1890ff" />
                                    </svg>
                                    <svg v-else viewBox="0 0 1024 1024" width="14" height="14">
                                        <path
                                            d="M512 592a192 192 0 1 1 192-192 192 192 0 0 1-192 192z m0-320a128 128 0 1 0 128 128 128 128 0 0 0-128-128z"
                                            fill="#ff69b4" />
                                        <path
                                            d="M704 864h-64V742.72a256.64 256.64 0 0 0 64-38.72zM480 742.72V864h-64v-160a256.64 256.64 0 0 0 64 38.72zM512 656a256 256 0 1 1 256-256 256 256 0 0 1-256 256z m0-448a192 192 0 1 0 192 192 192 192 0 0 0-192-192z"
                                            fill="#ff69b4" />
                                    </svg>
                                    <span style="margin-left: 4px">{{ userInfo.sex === 1 ? '男' : '女' }}</span>
                                </span>
                            </a-tag>
                            <!-- 邮箱图标 -->
                            <a-tag>
                                <span class="tag-content">
                                    <svg viewBox="0 0 1024 1024" width="14" height="14">
                                        <path
                                            d="M874.666667 375.189333V746.666667a64 64 0 0 1-64 64H213.333333a64 64 0 0 1-64-64V375.189333l362.666667 228.693334 362.666667-228.693334zM810.666667 213.333333a64.789333 64.789333 0 0 1 63.701333 53.568L512 494.037333l-362.368-227.136A64.789333 64.789333 0 0 1 213.333333 213.333333h597.333334z"
                                            fill="#1890ff" />
                                    </svg>
                                    <span style="margin-left: 4px">{{ userInfo.email || '未绑定邮箱' }}</span>
                                </span>
                            </a-tag>
                        </a-space>
                    </div>
                </template>
            </a-card-meta>
            <div style="margin-top: 20px;">
                <a-space :size="20" align="center">
                    <template #split>
                        <a-divider type="vertical" />
                    </template>
                    <span>
                        <a-space>
                            <span style="color: #4b5563;font-size: 12px;">文章</span>
                            <strong style="font-size: 20px;">
                                {{ userInfo.postsCount }}
                            </strong>
                        </a-space>
                    </span>
                    <span>
                        <a-space>
                            <span style="color: #4b5563;font-size: 12px;">钓场</span>
                            <strong style="font-size: 20px;">
                                {{ userInfo.fishSiteCount }}
                            </strong>
                        </a-space>
                    </span>
                    <span>
                        <a-space>
                            <span style="color: #4b5563;font-size: 12px;">收藏钓场</span>
                            <strong style="font-size: 20px;">
                                {{ userInfo.collectSiteCount }}
                            </strong>
                        </a-space>
                    </span>
                </a-space>
            </div>
        </a-card>
        <!-- 文章列表 -->
        <div class="posts-list" style="margin-top: 20px;" ref="scrollContainer" @scroll="handleScroll">
            <a-row type="flex" align="top">
                <!-- 左边 -->
                <a-col :span="18" class="main-container">
                    <a-row type="flex" align="top" style="gap: 16px;flex-direction: column;">
                        <!-- 展示区域 -->
                        <a-col style="background-color: #fff; border-radius: 10px;width: 100%;">
                            <div class="mainContent">
                                <ul class="serviceNav">
                                    <li class="title" :class="{ 'active': currentTab === 'posts' }"
                                        @click="switchTab('posts')">
                                        <p>帖子</p>
                                    </li>
                                    <li class="title" :class="{ 'active': currentTab === 'flow' }"
                                        @click="switchTab('flow')">
                                        <p>交流</p>
                                    </li>
                                </ul>
                            </div>
                            <a-spin :spinning="state.loading" :indicator="indicator">
                                <div class="topicList" ref="scrollContainer" @scroll="handleScroll1" >
                                    <div class="topicItem" v-for="topic in showData">
                                        <div class="avatarBox">
                                            <a-popover trigger="hover" placement="right"
                                                @mouseenter="handleMouseEnter(topic.userId)">
                                                <template #content>
                                                    <div class="user-popover">
                                                        <a-spin :spinning="!userInfo[topic.userId]"
                                                            :indicator="indicator">
                                                            <div class="user-info" v-if="userInfo[topic.userId]">
                                                                <img :src="topic.avatar" class="avatar" />
                                                                <div class="info">
                                                                    <div class="name">{{ topic.username }}</div>
                                                                    <div class="stats">
                                                                        <span>性别: {{ userInfo[topic.userId].sex == '1' ?
                                                                            '男' : '女'
                                                                            || '未填写'}}</span>
                                                                        <span>帖子:
                                                                            {{ userInfo[topic.userId].postsCount
                                                                            }}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="remark">{{ userInfo[topic.userId]?.email ||
                                                                '未绑定邮箱~' }}</div>
                                                            <div class="remark">{{ userInfo[topic.userId]?.remark ||
                                                                '这个人很懒,什么都没写~' }}</div>
                                                        </a-spin>
                                                    </div>
                                                </template>
                                                <a href="" class="avatarLink">
                                                    <img :src="topic.avatar" width="62" height="62" class="img" />
                                                </a>
                                            </a-popover>
                                        </div>

                                        <div class="content">

                                            <ul class="info">
                                                <li class="userName">
                                                    {{ topic.username }}
                                                </li>
                                            </ul>
                                            <div class="time">
                                                <div class="postTime">
                                                    {{ formatTime(topic.createTime) }}
                                                </div>
                                            </div>

                                            <h2 class="title">
                                                <router-link tag="a"
                                                    :to="{ path: '/social/detail', query: { postId: topic.postId } }"
                                                    target="_blank" @click="updateViewF(topic.postId)">
                                                    {{ topic.title }}
                                                </router-link>

                                                <span class="top" v-if="false">置顶</span>
                                            </h2>

                                            <div class="detail">
                                                <router-link tag="a"
                                                    :to="{ path: '/social/detail', query: { postId: topic.postId } }"
                                                    target="_blank" @click="updateViewF(topic.postId)">
                                                    <h2 class="summary"
                                                        v-html="truncateContent(sanitizeHtml(topic.content), 100)">
                                                    </h2>
                                                    <span v-if="isContentTruncated(sanitizeHtml(topic.content), 100)"
                                                        class="read-more">
                                                        查看全文
                                                    </span>
                                                </router-link>
                                            </div>

                                            <div class="bottomInfo">
                                                <div class="tag-container">
                                                    <span class="tag" v-for="tag of topic.tagList">{{ tag }}</span>
                                                </div>
                                                <div class="statistic">
                                                    <div class="iconItem">
                                                        <div
                                                            @click="handleLike(topic.postId, topic.userId, topic.likeFlag)">
                                                            <div v-if="!topic.likeFlag">
                                                                <svg t="1735046296972" class="icon"
                                                                    viewBox="0 0 1024 1024" version="1.1"
                                                                    xmlns="http://www.w3.org/2000/svg" p-id="6672"
                                                                    width="15" height="15">
                                                                    <path
                                                                        d="M768 937.353846h-567.138462c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h117.366154c13.390769-5.513846 88.221538-42.535385 95.31077-241.033846 0-33.083077 24.418462-58.289231 60.652307-63.015385 58.289231-7.876923 133.907692 31.507692 154.387693 102.4 18.116923 64.590769 0 150.449231-14.178462 201.649231h208.738462c33.870769 0 66.166154 14.966154 88.221538 40.96 22.055385 25.993846 31.507692 60.652308 25.206154 94.523077l-55.138462 314.289231c-8.664615 55.926154-56.713846 96.098462-113.427692 96.098461z m-567.138462-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h567.138462c25.993846 0 47.261538-18.116923 51.987692-43.323077l55.138462-314.289231c2.363077-15.753846-1.575385-30.72-11.815385-43.323077-10.24-11.815385-24.418462-18.904615-40.172307-18.904615h-252.061539c-10.24 0-19.692308-4.726154-25.993846-13.390769-5.513846-8.664615-7.089231-19.692308-3.938462-29.144616 13.390769-35.446154 44.110769-141.784615 25.993847-204.8-8.664615-29.932308-35.446154-48.049231-57.501539-54.350769-18.116923-5.513846-30.72-3.150769-34.658461-1.575385v0.787693c-8.664615 268.603077-133.907692 299.323077-148.086154 301.686154-1.575385 0-3.938462 0.787692-5.513846 0.787692H200.861538z"
                                                                        fill="#2c2c2c" p-id="6673"></path>
                                                                    <path
                                                                        d="M200.861538 423.778462c-46.473846 0-84.283077 37.809231-84.283076 84.283076v314.289231c0 46.473846 37.809231 84.283077 84.283076 84.283077h72.467693V423.778462h-72.467693z"
                                                                        fill="#2c2c2c" p-id="6674"></path>
                                                                    <path
                                                                        d="M273.329231 937.353846h-72.467693c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h72.467693c17.329231 0 31.507692 14.178462 31.507692 31.507692V905.846154c0 17.329231-14.178462 31.507692-31.507692 31.507692z m-72.467693-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h40.96V455.286154h-40.96z"
                                                                        fill="#2c2c2c" p-id="6675"></path>
                                                                </svg>
                                                            </div>
                                                            <div v-else>
                                                                <svg t="1735046296972" class="icon"
                                                                    viewBox="0 0 1024 1024" version="1.1"
                                                                    xmlns="http://www.w3.org/2000/svg" p-id="6672"
                                                                    width="15" height="15">
                                                                    <path
                                                                        d="M768 937.353846h-567.138462c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h117.366154c13.390769-5.513846 88.221538-42.535385 95.31077-241.033846 0-33.083077 24.418462-58.289231 60.652307-63.015385 58.289231-7.876923 133.907692 31.507692 154.387693 102.4 18.116923 64.590769 0 150.449231-14.178462 201.649231h208.738462c33.870769 0 66.166154 14.966154 88.221538 40.96 22.055385 25.993846 31.507692 60.652308 25.206154 94.523077l-55.138462 314.289231c-8.664615 55.926154-56.713846 96.098462-113.427692 96.098461z m-567.138462-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h567.138462c25.993846 0 47.261538-18.116923 51.987692-43.323077l55.138462-314.289231c2.363077-15.753846-1.575385-30.72-11.815385-43.323077-10.24-11.815385-24.418462-18.904615-40.172307-18.904615h-252.061539c-10.24 0-19.692308-4.726154-25.993846-13.390769-5.513846-8.664615-7.089231-19.692308-3.938462-29.144616 13.390769-35.446154 44.110769-141.784615 25.993847-204.8-8.664615-29.932308-35.446154-48.049231-57.501539-54.350769-18.116923-5.513846-30.72-3.150769-34.658461-1.575385v0.787693c-8.664615 268.603077-133.907692 299.323077-148.086154 301.686154-1.575385 0-3.938462 0.787692-5.513846 0.787692H200.861538z"
                                                                        fill="#4d9cdd" p-id="6673"></path>
                                                                    <path
                                                                        d="M200.861538 423.778462c-46.473846 0-84.283077 37.809231-84.283076 84.283076v314.289231c0 46.473846 37.809231 84.283077 84.283076 84.283077h72.467693V423.778462h-72.467693z"
                                                                        fill="#4d9cdd" p-id="6674"></path>
                                                                    <path
                                                                        d="M273.329231 937.353846h-72.467693c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h72.467693c17.329231 0 31.507692 14.178462 31.507692 31.507692V905.846154c0 17.329231-14.178462 31.507692-31.507692 31.507692z m-72.467693-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h40.96V455.286154h-40.96z"
                                                                        fill="#4d9cdd" p-id="6675"></path>
                                                                </svg>
                                                            </div>
                                                        </div>
                                                        <p :style="{ color: !topic.likeFlag ? '#2c2c2c' : '#4d9cdd' }">
                                                            {{ topic.likeCount }}</p>
                                                    </div>
                                                    <div class="iconItem">
                                                        <div
                                                            @click="handleCollect(topic.postId, topic.userId, topic.collectFlag)">

                                                            <div v-if="!topic.collectFlag">
                                                                <svg t="1734707381648" class="icon"
                                                                    viewBox="0 0 1059 1024" version="1.1"
                                                                    xmlns="http://www.w3.org/2000/svg" p-id="4419"
                                                                    width="15" height="15">
                                                                    <path
                                                                        d="M253.488042 1024c-16.9 0-33.2875-5.1125-47.6125-15.3625-26.625-18.425-39.425-49.6625-34.3125-81.925l40.9625-251.9c1.5375-10.2375-1.5375-20.475-8.7-27.65L28.213042 466.4375c-22.0125-22.525-29.1875-55.3-19.45-84.9875 9.725-29.7 35.325-51.2 66.05-55.8125l237.575-36.35c10.75-1.5375 19.4625-8.1875 24.0625-17.925L441.388042 48.125c13.825-29.7 42.5-48.125 75.2625-48.125s61.4375 18.4375 75.2625 48.125l104.45 223.2375c4.6125 9.725 13.825 16.375 24.0625 17.925L958.000542 325.625a82.355 82.355 0 0 1 66.05 55.8125c10.2375 29.7 2.5625 62.4625-19.45 84.9875l-175.625 180.7375c-7.1625 7.175-10.2375 17.925-8.7 27.65l40.9625 251.9c5.125 31.75-8.1875 63.4875-34.3 81.925-26.1125 18.4375-59.9 20.4875-88.0625 4.6125l-206.85-114.6875c-9.725-5.1125-20.9875-5.1125-30.7125 0l-207.3625 115.2c-12.8125 6.65-26.6375 10.2375-40.4625 10.2375zM516.650542 51.2c-12.8 0-23.55 7.1625-29.1875 18.4375L383.525542 292.875c-11.775 25.0875-35.325 43.0125-62.975 47.1l-237.575 36.35c-12.2875 2.05-21.5 9.7375-25.6 21.5-4.1 11.775-1.025 24.0625 7.675 32.775L240.688042 611.325c18.4375 18.95 26.625 45.5625 22.525 71.675L222.250542 934.9125c-2.05 12.8 3.075 24.575 13.3125 31.7375 10.2375 7.175 23.0375 7.6875 33.7875 1.5375l207.3625-115.2c25.0875-13.825 55.3-13.825 80.3875 0l207.3625 115.2c10.75 6.1375 23.55 5.625 33.8-1.5375 10.2375-7.1625 15.3625-18.95 13.3125-31.7375L770.625542 683.0125c-4.1-26.1125 4.1-52.7375 22.525-71.675l175.625-180.7375c8.7-8.7 11.2625-20.9875 7.675-32.775-4.0875-11.775-13.3125-19.9625-25.6-21.5l-237.5625-36.35c-27.65-4.0875-51.2-22.0125-62.975-47.1L545.838042 69.6375c-5.625-11.2625-16.375-18.4375-29.1875-18.4375z m0 0"
                                                                        p-id="4420" fill="#2c2c2c"></path>
                                                                </svg>
                                                            </div>
                                                            <div v-else>
                                                                <svg t="1734707381648" class="icon"
                                                                    viewBox="0 0 1059 1024" version="1.1"
                                                                    xmlns="http://www.w3.org/2000/svg" p-id="4419"
                                                                    width="15" height="15">
                                                                    <path
                                                                        d="M253.488042 1024c-16.9 0-33.2875-5.1125-47.6125-15.3625-26.625-18.425-39.425-49.6625-34.3125-81.925l40.9625-251.9c1.5375-10.2375-1.5375-20.475-8.7-27.65L28.213042 466.4375c-22.0125-22.525-29.1875-55.3-19.45-84.9875 9.725-29.7 35.325-51.2 66.05-55.8125l237.575-36.35c10.75-1.5375 19.4625-8.1875 24.0625-17.925L441.388042 48.125c13.825-29.7 42.5-48.125 75.2625-48.125s61.4375 18.4375 75.2625 48.125l104.45 223.2375c4.6125 9.725 13.825 16.375 24.0625 17.925L958.000542 325.625a82.355 82.355 0 0 1 66.05 55.8125c10.2375 29.7 2.5625 62.4625-19.45 84.9875l-175.625 180.7375c-7.1625 7.175-10.2375 17.925-8.7 27.65l40.9625 251.9c5.125 31.75-8.1875 63.4875-34.3 81.925-26.1125 18.4375-59.9 20.4875-88.0625 4.6125l-206.85-114.6875c-9.725-5.1125-20.9875-5.1125-30.7125 0l-207.3625 115.2c-12.8125 6.65-26.6375 10.2375-40.4625 10.2375zM516.650542 51.2c-12.8 0-23.55 7.1625-29.1875 18.4375L383.525542 292.875c-11.775 25.0875-35.325 43.0125-62.975 47.1l-237.575 36.35c-12.2875 2.05-21.5 9.7375-25.6 21.5-4.1 11.775-1.025 24.0625 7.675 32.775L240.688042 611.325c18.4375 18.95 26.625 45.5625 22.525 71.675L222.250542 934.9125c-2.05 12.8 3.075 24.575 13.3125 31.7375 10.2375 7.175 23.0375 7.6875 33.7875 1.5375l207.3625-115.2c25.0875-13.825 55.3-13.825 80.3875 0l207.3625 115.2c10.75 6.1375 23.55 5.625 33.8-1.5375 10.2375-7.1625 15.3625-18.95 13.3125-31.7375L770.625542 683.0125c-4.1-26.1125 4.1-52.7375 22.525-71.675l175.625-180.7375c8.7-8.7 11.2625-20.9875 7.675-32.775-4.0875-11.775-13.3125-19.9625-25.6-21.5l-237.5625-36.35c-27.65-4.0875-51.2-22.0125-62.975-47.1L545.838042 69.6375c-5.625-11.2625-16.375-18.4375-29.1875-18.4375z m0 0"
                                                                        p-id="4420" fill="#4d9cdd"></path>
                                                                </svg>
                                                            </div>
                                                        </div>
                                                        <p
                                                            :style="{ color: !topic.collectFlag ? '#2c2c2c' : '#4d9cdd' }">
                                                            {{ topic.collectCount }}</p>
                                                    </div>
                                                    <div class="iconItem">
                                                        <router-link tag="a"
                                                            :to="{ path: '/social/detail', query: { postId: topic.postId } }"
                                                            target="_blank" @click="updateViewF(topic.postId)">
                                                            <svg t="1734707475236" class="icon" viewBox="0 0 1024 1024"
                                                                version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                                p-id="6694" width="15" height="15">
                                                                <path
                                                                    d="M512 0C229.696 0 0 196.672 0 438.421333c0 144.384 82.282667 278.336 220.778667 360.469333l0 203.733333c0 8.213333 4.714667 15.744 12.181333 19.285333C235.882667 1023.338667 239.04 1024 242.154667 1024c4.8 0 9.578667-1.621333 13.461333-4.8l181.589333-147.456c26.794667 3.413333 51.370667 5.077333 74.794667 5.077333 282.282667 0 512-196.693333 512-438.421333C1024 196.672 794.282667 0 512 0zM512.021333 834.090667c-24.106667 0-49.664-1.941333-78.144-5.952-5.845333-0.874667-11.84 0.832-16.448 4.586667l-153.92 125.034667 0-171.2c0-7.701333-4.16-14.848-10.901333-18.602667-131.413333-73.813333-209.877333-197.013333-209.877333-329.514667C42.730667 220.245333 253.269333 42.730667 512 42.730667s469.312 177.472 469.312 395.648S770.773333 834.090667 512.021333 834.090667z"
                                                                    p-id="6695" fill="#2c2c2c"></path>
                                                                <path
                                                                    d="M512 438.4m-49.066667 0a2.3 2.3 0 1 0 98.133333 0 2.3 2.3 0 1 0-98.133333 0Z"
                                                                    p-id="6696" fill="#2c2c2c"></path>
                                                                <path
                                                                    d="M266.709333 438.4m-49.066667 0a2.3 2.3 0 1 0 98.133333 0 2.3 2.3 0 1 0-98.133333 0Z"
                                                                    p-id="6697" fill="#2c2c2c"></path>
                                                                <path
                                                                    d="M757.290667 389.333333c-27.114667 0-49.024 21.952-49.024 49.088 0 27.136 21.888 49.045333 49.024 49.045333 27.157333 0 49.088-21.909333 49.088-49.045333C806.378667 411.285333 784.448 389.333333 757.290667 389.333333z"
                                                                    p-id="6698" fill="#2c2c2c"></path>
                                                            </svg>
                                                        </router-link>
                                                        <p>{{ topic.commentCount }}</p>
                                                    </div>
                                                    <div class="iconItem">
                                                        <svg t="1734707421038" class="icon" viewBox="0 0 1024 1024"
                                                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5556"
                                                            width="15" height="15">
                                                            <path
                                                                d="M512 608a96 96 0 1 1 0-192 96 96 0 0 1 0 192m0-256c-88.224 0-160 71.776-160 160s71.776 160 160 160 160-71.776 160-160-71.776-160-160-160"
                                                                p-id="5557" fill="#2c2c2c"></path>
                                                            <path
                                                                d="M512 800c-212.064 0-384-256-384-288s171.936-288 384-288 384 256 384 288-171.936 288-384 288m0-640C265.248 160 64 443.008 64 512c0 68.992 201.248 352 448 352s448-283.008 448-352c0-68.992-201.248-352-448-352"
                                                                p-id="5558" fill="#2c2c2c"></path>
                                                        </svg>
                                                        <P>{{ topic.viewCount }}</P>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div v-if="!state.loading" :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
                                        <a-divider v-if="showData.length > 0">
                                            {{ !state.isLoading ? '已经到底了 🤐' : '加载中...' }}
                                        </a-divider>
                                    </div>
                                    <a-skeleton :loading="state.loading" style="padding-top: 25px;" />
                                </div>
                            </a-spin>
                        </a-col>
                    </a-row>
                </a-col>

                <a-col :span="6" style="padding-left: 10px;" class="left-container">
                    <div class="container1">
                        <a-scrollbar
                            :style="{ maxHeight: state.tagScrollbarMaxHeight, transition: 'max-height 0.3s ease 0s' }">
                            <div class="item">
                                <router-link tag="a" to="/social/hot" class="title"
                                    :class="router.currentRoute.value.query.tagId == undefined || router.currentRoute.value.query.tagId == '' ? 'active' : ''">
                                    <div class="svg-container">
                                        <svg t="1734709397397" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="7747">
                                            <path
                                                d="M536.796756 350.460884c-15.129582 0-27.129894 8.216125-35.993772 24.647353-9.914814 18.779715-14.866592 53.598732-14.866592 104.46012 0 50.603515 4.694929 85.424578 14.084787 104.46012 8.081049 16.432251 20.344351 24.647353 36.775578 24.647353 16.95209 0 29.080316-8.215102 36.385698-24.647353 9.645684-19.561521 14.475689-54.382585 14.475689-104.46012-0.264013-51.117215-5.220908-86.200244-14.867616-105.241926C564.440349 358.420159 552.446177 350.460884 536.796756 350.460884z"
                                                fill="#ff5930" p-id="7748"></path>
                                            <path
                                                d="M805.411563 231.911884 245.670236 231.911884c-48.060599 0-87.020936 38.960337-87.020936 87.020936l0 307.98242c0 48.060599 38.960337 87.020936 87.020936 87.020936l559.741327 0c48.060599 0 87.020936-38.960337 87.020936-87.020936L892.432499 318.933843C892.432499 270.873244 853.471139 231.911884 805.411563 231.911884zM420.209434 463.136106l0 32.863479L420.209434 625.107057c0 10.954493-5.477758 16.432251-16.432251 16.432251s-16.432251-5.477758-16.432251-16.432251L387.344932 495.999584l-101.720729 0L285.624203 625.107057c0 10.954493-5.477758 16.432251-16.432251 16.432251s-16.432251-5.477758-16.432251-16.432251L252.759701 495.999584l0-32.863479L252.759701 334.028633c0-10.954493 5.477758-16.432251 16.432251-16.432251 10.954493 0 16.432251 5.477758 16.432251 16.432251l0 129.107473 101.720729 0L387.344932 334.028633c0-10.954493 5.477758-16.432251 16.432251-16.432251s16.432251 5.477758 16.432251 16.432251L420.209434 463.136106zM600.959078 603.589998c-13.826913 25.302269-35.20992 37.94931-64.162322 37.94931-28.16855-0.26299-48.647977-11.865235-61.423955-34.819017-14.866592-25.039279-22.299889-67.421552-22.299889-127.151935 0-61.289901 7.042393-102.631472 21.12718-124.021641 16.689101-25.296129 37.558407-37.94931 62.597687-37.94931 28.16855 0.26299 49.816592 13.045107 64.946174 38.341237 12.519128 21.908986 18.779715 63.123666 18.779715 123.629715C620.258633 539.561729 613.737102 580.898183 600.959078 603.589998zM804.40156 350.460884l-50.860365 0L753.541195 625.107057c0 10.954493-5.477758 16.432251-16.432251 16.432251s-16.432251-5.477758-16.432251-16.432251L720.676693 350.460884 669.816329 350.460884c-10.954493 0-16.432251-5.477758-16.432251-16.432251s5.477758-16.432251 16.432251-16.432251l50.860365 0 32.863479 0 50.860365 0c10.954493 0 16.432251 5.477758 16.432251 16.432251S815.356053 350.460884 804.40156 350.460884z"
                                                fill="#ff5930" p-id="7749"></path>
                                        </svg>
                                        <div class="text">热门帖子</div>
                                    </div>

                                    <!-- 使用打开新标签页的方式 -->
                                    <div class="more" @click="openHotPosts">更多</div>
                                </router-link>
                            </div>

                            <div class="item" v-for="hot in filteredHotList" :key="hot.postId">
                                <a-tooltip :title="hot.name" placement="right" :disabled="tagTooltipDisabled">
                                    <router-link tag="a" :to="{ path: '/social/detail', query: { postId: hot.postId } }"
                                        class="title"
                                        :class="router.currentRoute.value.query.postId == hot.postId ? 'active' : ''">
                                        <div class="text cell">{{ hot.title }}</div>
                                        <!-- 添加热度显示 -->
                                        <div class="heat">
                                            <span>{{ hot.viewCount || 0 }}</span>
                                            <span class="heat-text">热度</span>
                                        </div>
                                    </router-link>
                                </a-tooltip>
                            </div>
                        </a-scrollbar>
                    </div>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getUserProfile as getUserProfileApi } from '@/api/front/user';
import { useRouter } from 'vue-router'
import { socialList, updateView, hotList } from "@/api/front/social";
import DOMPurify from 'dompurify';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';
import { debounce } from 'lodash';
import { LoadingOutlined } from '@ant-design/icons-vue';
import { likePosts } from '@/api/front/like';
import { collectPosts } from '@/api/front/collect';

const userId = ref<string>('');
const route = useRoute();
const userInfo = ref<Record<string, any>>({})

const getUserProfile = async () => {
    const res = await getUserProfileApi({ userId: userId.value }, {
        //设置请求头
        repeatSubmit: false,
        showProgress: false
    });
    userInfo.value = res.data;
}

onMounted(async () => {
    userId.value = route.query.userId as string;
    await Promise.all([
        getUserProfile(),
        getUserPosts(),
        getHotPosts()
    ]);
})
const tagTooltipDisabled = ref<boolean>(true);
const router = useRouter();
const currentTab = ref('posts')
const showData = ref<any[]>([]);
const hasMore = ref(true);
const state = reactive({
    loading: true,
    tagScrollbarMaxHeight: "calc(10vh - 186px)",
    hasMore: true,
    cursorId: '',
    recommendScore: 0,
    isLoading: false
});

const indicator = h(LoadingOutlined, {
    style: {
        fontSize: '24px',
    },
    spin: true,
});
const scrollContainer = ref(null);
const cursor = ref(null);

const handleScroll1 = debounce(async (e) => {
    const { scrollHeight, scrollTop, clientHeight } = e.target;
    
    if (scrollHeight - scrollTop - clientHeight < 100 && !state.isLoading && state.hasMore) {
        await loadMoreData();
    }
}, 200);

const loadMoreData = async () => {
    if (state.isLoading || !state.hasMore) return;
    
    try {
        state.isLoading = true;
        const params: any = {
            type: currentTab.value,
        };
        
        if (state.cursorId) {
            params.cursorId = state.cursorId;
            params.recommendScore = state.recommendScore;
        }
        
        const res = await socialList(params, {
            repeatSubmit: false
        });
        
        if (res.data.postsList && res.data.postsList.length > 0) {
            const existingPostIds = new Set(showData.value.map(post => post.postId));
            const newPosts = res.data.postsList.filter(post => !existingPostIds.has(post.postId));
            
            if (newPosts.length > 0) {
                const lastItem = newPosts[newPosts.length - 1];
                state.cursorId = lastItem.postId;
                state.recommendScore = lastItem.recommendScore || 0;
                
                showData.value = [...showData.value, ...newPosts].sort((a, b) => 
                    new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
                );
            }
        }
        
        state.hasMore = Boolean(res.data.hasMore);
        
    } catch (error) {
        console.error('加载更多数据失败:', error);
        message.error('加载更多数据失败');
    } finally {
        state.isLoading = false;
    }
};

const debouncedHandleMouseEnter = debounce(async (userId: string) => {
  if (userInfo.value[userId]) {
      return;
  }
  try {
    const res = await getUserProfileApi({userId}, {
        //设置请求头
        repeatSubmit: false,
        showProgress: false
     });
      if (res.code === 200) {
          userInfo.value[userId] = res.data;
      }
  } catch (error) {
      console.error('获取用户信息失败:', error);
  }
}, 100);
// 使用防抖函数
const handleMouseEnter = (userId: string) => {
   debouncedHandleMouseEnter(userId);
};

const handleScroll = () => {
    const container = scrollContainer.value;
    if (!container) return;

    const scrollTop = container.scrollTop;
    const clientHeight = container.clientHeight;
    const scrollHeight = container.scrollHeight;

    if (scrollTop + clientHeight >= scrollHeight - 10 && hasMore.value) {
        getUserPosts();
    }
};

const truncateContent = (content, maxLength) => {
    const tempElement = document.createElement('div');
    tempElement.innerHTML = content;
    const text = tempElement.innerText || tempElement.textContent;
    return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
}

const isContentTruncated = (content: string, maxLength: number) => {
    const tempElement = document.createElement('div');
    tempElement.innerHTML = content;
    const text = tempElement.innerText || tempElement.textContent;
    return text.length > maxLength;
}

const formatTime = (time: string) => {
    const now = dayjs();
    const postTime = dayjs(time);

    if (postTime.format('YYYY-MM-DD') === now.format('YYYY-MM-DD')) {
        return '今天 ' + postTime.format('HH:mm');
    }

    if (postTime.format('YYYY-MM-DD') === now.subtract(1, 'day').format('YYYY-MM-DD')) {
        return '昨天 ' + postTime.format('HH:mm');
    }

    if (postTime.format('YYYY') === now.format('YYYY')) {
        return postTime.format('MM-DD HH:mm');
    }

    return postTime.format('YYYY-MM-DD HH:mm');
};

const debouncedLike = debounce(async (postId: string, userId: string, isLike: boolean) => {
    try {
        const currentPost = showData.value.find(post => post.postId === postId);
        if (currentPost) {
            currentPost.likeCount = isLike ? currentPost.likeCount - 1 : currentPost.likeCount + 1;
            currentPost.likeFlag = !isLike;
        }
        const params = {
            type: isLike ? 'unlike' : 'like',
            authorId: userId,
            postsId: postId
        }
        const headers = {
            repeatSubmit: false,
            showProgress: false
        }
        const res = await likePosts(params, headers);

        if (res.code !== 200) {
            if (currentPost) {
                currentPost.likeCount = isLike ? currentPost.likeCount + 1 : currentPost.likeCount - 1;
                currentPost.likeFlag = isLike;
            }
        }
    } catch (error) {
        const currentPost = showData.value.find(post => post.postId === postId);
        if (currentPost) {
            currentPost.likeCount = isLike ? currentPost.likeCount + 1 : currentPost.likeCount - 1;
            currentPost.likeFlag = isLike;
        }
        message.error('操作失败，请重试');
    }
}, 800);

const debouncedCollect = debounce(async (postId: string, userId: string, isCollect: boolean) => {
    try {
        const currentPost = showData.value.find(post => post.postId === postId);
        if (currentPost) {
            currentPost.collectCount = isCollect ? currentPost.collectCount - 1 : currentPost.collectCount + 1;
            currentPost.collectFlag = !isCollect;
        }
        const params = {
            type: isCollect ? 'uncollect' : 'collect',
            authorId: userId,
            postsId: postId
        }
        const headers = {
            repeatSubmit: false,
            showProgress: false
        }
        const res = await collectPosts(params, headers);

        if (res.code !== 200) {
            if (currentPost) {
                currentPost.collectCount = isCollect ? currentPost.collectCount + 1 : currentPost.collectCount - 1;
                currentPost.collectFlag = isCollect;
            }
            message.error('操作失败，请重试');
        }
    } catch (error) {
        const currentPost = showData.value.find(post => post.postId === postId);
        if (currentPost) {
            currentPost.collectCount = isCollect ? currentPost.collectCount + 1 : currentPost.collectCount - 1;
            currentPost.collectFlag = isCollect;
        }
        message.error('操作失败，请重试');
    }
}, 800);


const handleLike = (postId: string, userId: string, isLike: boolean) => {
    debouncedLike(postId, userId, isLike);
}

const handleCollect = (postId: string, userId: string, isCollect: boolean) => {
    debouncedCollect(postId, userId, isCollect);
}

const sanitizeHtml = (content) => {
    return DOMPurify.sanitize(content);
}

const updateViewF = async (postId: string) => {
    try {
        await updateView({ postId });
    } catch (error) {
        message.error('更新浏览量失败');
    }
}

const switchTab = async (tab: string) => {
    currentTab.value = tab;
    state.loading = true;
    showData.value = [];

    try {
        const res = await socialList({
            categoryId: currentTab.value === 'posts' ? 0 : 1,
            userId: userId.value
        });

        if (res.code === 200) {
            showData.value = res.data.postsList.sort((a, b) =>
                new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
            );
        }
    } catch (error) {
        message.error('获取帖子列表失败');
    } finally {
        state.loading = false;
    }
}

const openHotPosts = () => {
    const routeData = {
        path: '/social/hot'
    };
    const routeUrl = router.resolve(routeData);
    window.open(routeUrl.href, '_blank');
};

// 添加热门帖子列表的ref
const hotListData = ref<any[]>([]);

// 添加计算属性过滤热门帖子
const filteredHotList = computed(() => {
    return hotListData.value
        .filter(item => item.title)
        .slice(0, 10);
});

// 添加获取用户帖子列表的方法
const getUserPosts = async () => {
    try {
        state.loading = true;
        const res = await socialList({
            type: "user",
            userId: userId.value,
            cursorId: cursor.value
        });

        if (res.code === 200) {
            showData.value = [...showData.value, ...res.data.postsList];
            cursor.value = res.data.postsList[res.data.postsList?.length - 1].postId;
            hasMore.value = res.data.hasMore;
        }
    } catch (error) {
        message.error('获取用户帖子列表失败');
    } finally {
        state.loading = false;
    }
}

// 添加获取热门帖子的方法
const getHotPosts = async () => {
    try {
        const res = await hotList({ categoryId: 0 });
        if (res.code === 200) {
            hotListData.value = res.data;
        }
    } catch (error) {
        message.error('获取热门帖子失败');
    }
}
</script>

<style lang="scss" scoped>
.tag-content {
    display: flex;
    align-items: center;

    svg {
        flex-shrink: 0;
    }
}

:deep(.ant-tag) {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    margin-right: 8px;

    .anticon {
        margin-right: 4px;
    }
}

.user-popover {
    width: 300px;
    padding: 12px;

    .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 12px;

        .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            margin-right: 12px;
        }

        .info {
            .name {
                font-size: 16px;
                font-weight: 500;
                color: #272e3b;
                margin-bottom: 4px;
            }

            .stats {
                color: #86909c;
                font-size: 14px;

                span {
                    margin-right: 12px;
                }
            }
        }
    }

    .remark {
        color: #86909c;
        font-size: 14px;
        line-height: 1.5;
    }
}

.mainContent {
    .serviceNav {
        height: 66px;
        font-size: 15px;
        border-radius: 5px;
        padding: 0;
        display: flex;
        border-bottom: 1px solid #f2f3f5;

        ul {
            padding: 0;
        }

        .title {
            list-style: none;
            padding: 0 25px;
            height: 66px;
            line-height: 66px;
            cursor: pointer;
            position: relative;
            display: flex;
            color: #333;

            &:hover {
                background-color: #f0f0f0;
            }
        }

        .active {
            cursor: pointer;

            p {
                color: #c2197b;
                border-bottom: 2px solid #c2197b;
                height: 56px;
            }
        }

        .more {
            color: #86909c;

            .icom {
                margin-left: 5px;
                position: relative;
                top: 3px;
            }
        }
    }
}

.left-container {
    .container1 {
        background: #fff;
        padding: 8px 0px 8px 0px;
        box-sizing: border-box;
        border-radius: 10px;
        box-shadow: 0 0px 3px 0 rgba(0, 0, 0, .02), 0 4px 8px 0 rgba(0, 0, 0, .02);
        transition: top 0.3s ease 0s;
        height: fit-content;
        min-height: 100px;
    }

    .item {
        display: block;
        margin-bottom: 2px;
        padding: 0px 8px 0px 8px;

        &:nth-child(1) a {
            display: flex;
            justify-content: space-between;
        }

        .title {
            padding: 0 12px;
            color: #4e5969;
            border-radius: 4px;
            display: flex;
            align-items: center;
            height: 44px;
            font-size: 16px;
            transition: color .3s;

            .text {
                flex: 1;
                margin-right: 8px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .more {
                color: #4d9cdd;
                font-size: 14px;
                cursor: pointer;
            }

            .heat {
                display: flex;
                align-items: center;
                font-size: 12px;
                color: #86909c;
                white-space: nowrap;

                .heat-text {
                    margin-left: 4px;
                }
            }

            .svg-container {
                display: flex;
                align-items: center;

                svg {
                    margin-right: 10px;
                    width: 30px;
                    height: 30px;
                }
            }

            &:hover {
                color: #272e3b;
                background: #f7f8fa;
            }

            &:hover svg {
                fill: #6b7785;
            }
        }

        .title.active {
            color: #272e3b;
            background: #f7f8fa !important;

            svg {
                fill: #6b7785;
            }
        }
    }
}

.main-container {
    .topicList {
        margin-left: 10px;
        margin-right: 10px;

        .topicItem {
            margin: 0;
            height: 100%;
            border-bottom: 1px solid #f2f3f5;
            padding: 15px 0 10px 0;
            position: relative;

            .avatarBox {
                position: relative;
                margin-left: 0px;
                padding: 0;
                float: left;

                .avatarLink {
                    display: block;
                    position: relative;
                    float: left;
                    padding-left: 4px;

                    img {
                        float: none;
                        display: block;
                        width: 62px;
                        height: 62px;
                        float: left;
                        margin-right: 10px;
                        border-radius: 62px;
                        position: relative;
                    }
                }
            }

            .content {
                margin-left: 88px;

                .info {
                    margin-top: 2px;
                    margin-bottom: 2px;
                    color: #c9cdd4;
                    padding-left: 0;
                    list-style: none;
                    font-size: 0;

                    .userName {
                        color: #86909c;
                        font-size: 15px;
                    }
                }

                .info>li {
                    display: inline-block;
                }

                .time {
                    font-size: 14px;
                    color: #a9aeb8;
                }

                .title {
                    margin: 0 5px 0 0;
                    font-size: 0;
                    font-weight: normal;
                    word-break: break-all;

                    a {
                        color: #1890ff;
                        font-size: 18px;
                        line-height: 32px;

                        &:hover {
                            text-decoration: none;
                            color: #1890ff;
                        }
                    }
                }

                .detail {
                    position: relative;

                    .read-more {
                        color: #1890ff;
                        margin-left: 5px;
                        font-size: 14px;

                        &:hover {
                            color: #40a9ff;
                        }
                    }

                    .summary {
                        margin: 5px 50px 0 0;
                        font-size: 15px;
                        line-height: 28px;
                        font-weight: normal;
                        text-decoration: none;
                        color: #666;
                    }
                }

                .bottomInfo {
                    margin-top: 10px;
                    display: flex;
                    justify-content: space-between;

                    .tag-container {
                        float: left;

                        .tag {
                            display: inline-block;
                            white-space: nowrap;
                            margin-right: 5px;
                            padding: 0px 8px;
                            font-size: 14px;
                            line-height: 24px;
                            border-radius: 8px;
                            color: #898989;
                            background-color: #f5f5f5;
                        }
                    }

                    .statistic {
                        display: flex;
                        font-size: 14px;
                        position: relative;
                        top: 2px;
                        color: #a9aeb8;

                        .iconItem {
                            cursor: pointer;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-right: 10px;

                            p {
                                vertical-align: middle;
                                margin: 0;
                                margin-left: 4px;
                                line-height: 1;
                                color: #2c2c2c;
                            }

                            a {
                                display: block;
                                vertical-align: middle;
                                margin: 0;
                                margin-left: 4px;
                                line-height: 1;
                                color: #2c2c2c;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {

    .main-container,
    .left-container {
        padding: 0;

        .topicList,
        .container1 {
            margin: 10px 0;
        }
    }
}
</style>
